<template>
  <!--使用an-of-vue-->
  <a-card :bordered="false" class="card-box">
    <div class="container">
      <div class="left">
        <a-input-search
          allowClear
          v-model="searchValue"
          @search="onSearchDisease"
          style="margin-bottom: 8px"
          placeholder="请输入保卡类型或病种名称"
        />
        <div class="buttonDiv">
          <a-button type="primary" @click="searchQuery">新增</a-button>
          <a-button type="primary">修改</a-button>
          <a-button type="primary">删除</a-button>
          <a-button type="primary">拷贝</a-button>
        </div>
        <!-- 查询区域-END -->
        <a-table
          ref="table"
          size="small"
          :scroll="{ x: true }"
           bordered
           rowKey="id"
          :columns="columns"
          :loading="tableLoading"
          :data-source="dataSource"
          class="j-table-force-nowrap"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          @change="handleTableChange">
          <template slot="htmlSlot" slot-scope="text">
            <div v-html="text"></div>
          </template>
            <span>
               <a @click="handleOperation('view')" slot="action" >查看</a>
               <a @click="handleOperation('edit')" slot="action" >编辑</a>
               <a @click="handleOperation('delete')" slot="action" >删除</a>
               <a @click="handleOperation('copy')" slot="action" >拷贝</a>
            </span>
        </a-table>
      </div>

      <div class="right">
        223333333333333333333333
      </div>
    </div>
  </a-card>
</template>

<script>
  const dataSource = [
    {
      id: '1',
      name: 'John Brown',
      age: 32,
    },
    {
      id: '2',
      name: 'Jim Green',
      age: 42,
    },
    {
      id: '3',
      name: 'Joe Black',
      age: 32,
    },
    {
      id: '4',
      name: 'Disabled User',
      age: 99,
    },
  ];
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      align: 'center',
      fixed: 'right',
      scopedSlots: { customRender: 'action' },
    },
  ];

  export default {
    name: "waringList",
    data() {
      return {
        searchValue: '',//搜索
        selectedKeys: [], // 表格选择
        columns, // 表格列
        dataSource,//表格数据
        selectedRowKeys: [], // Check here to configure the default column
        tableLoading: false, // 表格加载
      }
    }, methods: {
      //搜索
      onSearchDisease(value) {
      },
      //新增
      searchQuery() {
      },
      //表格
      handleTableChange() {},
      //操作，新增..删除..拷贝
      handleOperation(){},
      //表格列选择
      onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys;
      },
    }
  }
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
  }

  .container {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .left {
    width: 30%;
    height: 100%;

  }

  .right {
    width: 70%;
    height: 100%;
  }

  .buttonDiv {
    display: flex;
    justify-content: space-around;
  }
</style>
